import React, { Component } from 'react';
import axios from '../../utils/myaxios'
import { withRouter } from 'react-router-dom'

import './category.css'
import Search from '../Search/search'

class Category extends Component {
    state = {
        index: 0,
        categories: []

    }

    // 设置缓存
    setCache = (params) => {
        axios.get('categories').then(res => {
            let cacheData = {
                data: JSON.stringify(res),
                time: Date.now()
            }
            localStorage.setItem('categoryData', JSON.stringify(cacheData))
            this.setState({
                categories: res
            })
        }).catch(err => console.log(err))
    }
    // 获取缓存
    getCache = (params) => {
        let cacheData = JSON.parse(localStorage.getItem('categoryData'))
        if (Date.now() - cacheData.time > 1800000) {
            this.setCache()
        } else {
            this.setState({
                categories: JSON.parse(cacheData.data)
            })
        }
    }

    categoryClick = (e) => {
        this.setState({
            index: e.target.getAttribute('data-index') - 0
        })
    }

    componentDidMount() {
        if (localStorage.getItem('categoryData')) {
            this.getCache()
        } else {
            this.setCache()
        }
    }
    render() {
        return (
            <div>
                {/* 首页标题开始 */}
                <section className="categoryTitle">
                    <h1>商品分类</h1>
                </section>
                {/* 首页标题结束 */}
                {/* 首页搜索开始 */}
                <section className="categorySearch">
                    <Search></Search>
                </section>
                {/* 首页搜索结束 */}
                {/* 分类栏开始 */}
                <section className="categoryContent">
                    <div className="categoryContentLeft" onClick={this.categoryClick}>
                        {this.state.categories.map((val, ind) => {
                            return (
                                <div className="categoryContentLeftItem" key={val.cat_id} data-index={ind}>
                                    <p data-index={ind} className={this.state.index == ind ? 'active' : ''}>{val.cat_name}</p>
                                </div>
                            )
                        })}
                    </div>
                    <div className="categoryContentRigth">
                        {this.state.categories[this.state.index] && this.state.categories[this.state.index].children.map(val => {
                            return (
                                <div className="categoryContentRigthSort" key={val.cat_id}>
                                    <h2>/ {val.cat_name} /</h2>
                                    <div className="categoryContentRigthSortItem">
                                        {val.children && val.children.map(item => {
                                            return (
                                                <div key={item.cat_id}>
                                                    <img src={item.cat_icon} alt={item.cat_name} />
                                                    <p>{item.cat_name}</p>
                                                </div>
                                            )
                                        })}
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </section>
                {/* 分类栏结束 */}
            </div>
        );
    }
}

export default withRouter(Category);
